<template>
  <div class="entrust">
    <!-- 标题 -->
    <div class="nav-text">我发布的</div>
    <el-divider />
    <!-- 委托信息-我发布的 -->
    <ul class="myentrusts-list" v-if="username === 'zhangsan'">
      <li class="myentrust" v-for="item in items">
        <div class="info">
          <span class="username">{{ item.name }}</span><span class="datatime">{{ item.datatime }}</span><span
            class="tag">{{ item.tag }}</span>
        </div>
        <h3 class="title">
          {{ item.title }}
        </h3>
        <div class="biography">
          {{ item.biography }}
        </div>
        <div class="btn-list">
          <el-button type="primary">查看提交</el-button>
          <el-button type="danger">关闭委托</el-button>
        </div>
        <el-divider />
      </li>
    </ul>
    <div v-else style="text-align:center; padding-top: 30px;">
      <span style="color:#515767;">还没有发布委托!</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, } from "vue"

const username = localStorage.getItem('username');
const items = [
  {
    name: '张三',
    datatime: '2023年4月21日',
    tag: '微信小程序开发',
    title: '微信小程序定制',
    biography: '寻找大佬定制微信小程序，项目详细需求在文档中。'
  },
  {
    name: '张三',
    datatime: '2023年5月1日',
    tag: '软件开发',
    title: '图片展示下载系统 ',
    biography: '对上传的图片进行展示和付费下载'
  },
  {
    name: '张三',
    datatime: '2023年5月5日',
    tag: 'Logo设计',
    title: 'logo设计',
    biography: '设计要包含：1烟叶元素（烟草行业）2牡丹花元素...'
  }
];

</script>

<style lang="less" scoped>
.entrust {

  .nav-text {
    font-weight: 600;
    font-size: 20px;
    line-height: 18px;
    color: #333;
    margin-bottom: 20px;
  }

  .myentrusts-list {

    .myentrust {
      // padding-top: 10px;

      .info {
        color: #515767;
        padding: 5px 0;

        &>span {
          padding: 0 10px;
        }
      }

      .title {
        font-size: 20px;
        padding: 5px 10px;
      }

      .biography {
        color: #515767;
        padding: 5px 10px;
      }

      .btn-list {
        padding-left: 10px;
      }

      :deep(.el-divider--horizontal) {
        margin: 12px 0px;
      }
    }

  }
}
</style>